﻿<div class="layui-card" id="lg-paymentSlip-list">
    <div class="layui-card-header"><i class="fa fa-home fa-fw"></i>缴费清单</div>
    <div class="layui-card-body" id="">
         <!--查询条件-->
        <div class="lg-search lg-layout-row lg-layout-row-auto" skin="lg-form-inline">
            <div class="lg-search-item">
                <lg-form-date :data="{Title:'学年',Name:'Year'}" v-model:value="where.Year" format="year"></lg-form-date>
            </div>
            <div class="lg-search-item">
                <lg-form-select :data="{Title:'学期',Options:options.Semester}" v-model:value="where.Semester" val-type="value"></lg-form-select>
            </div>
            <div class="lg-search-item">
                <lg-form-select :data="{Title:'班级',Options:options.Grades}" v-model:value="where.GradeId" val-type="value"></lg-form-select>
            </div>
            <div class="lg-search-item">
                <lg-form-singletext :data="{Title:'姓名'}" v-model:value="where.Name" val-type="value"></lg-form-singletext>
            </div>
            <div class="lg-search-item">
                <lg-form-phone :data="{Title:'手机'}" v-model:value="where.Phone" val-type="value"></lg-form-phone>
            </div>
            <div class="lg-search-item">
                <lg-form-singletext :data="{Title:'流水号'}" v-model:value="where.SN"></lg-form-singletext>
            </div>
             <div class="lg-search-item">
                <lg-form-select :data="{Title:'状态',Options:options.PayState}" v-model:value="where.PayState" val-type="value"></lg-form-select>
            </div>
            <div class="lg-search-item layui-input-inline" style="width:auto">
                <button class="layui-btn" type="button" v-on:click="onSearch">搜索</button>
            </div>
        </div>
        <!--数据主体-->
        <div class="lg-form-box">
            <!--头部工具条-->
            <div class="lg-table-tool" id="toolbar">
                <div class="layui-btn-container">
                    <button class="layui-btn layui-btn-sm layui-btn-primary refresh" v-on:click="refresh"><i class="fa fa-refresh fa-fw"></i>刷新</button>
                </div>
            </div>
            <!--table-->
            <div class="lg-table-body">
                <table class="lg-table">
                    <thead>
                        <tr>
                            <th class="lg-table-check" v-on:click='onRowCheckAll'>
                                <div :class="['layui-unselect layui-form-checkbox',{'layui-form-checked':paymentSlips.length>0&&checked.length==paymentSlips.length}]" lay-skin="primary"><i class="layui-icon layui-icon-ok"></i></div>
                            </th>
                            <th style="text-align:center;">姓名</th>
                            <th style="text-align:center;width:60px">性别</th>
                            <th style="text-align:center;width:60px">学年</th>
                            <th style="text-align:center;width:60px">学期</th>
                            <th style="text-align:center">班级</th>
                            <th style="text-align:center;width:120px">金额</th>
                            <th style="text-align:center;width:60px">缴费状态</th>
                            <th style="text-align:center;width:100px">添加日期</th>
                            <th style="width:160px">操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="row in paymentSlips">
                            <td class="lg-table-check">
                                <div :class="['layui-unselect layui-form-checkbox',{'layui-form-checked':isChecked(row)}]" lay-skin="primary" v-on:click="onRowCheck(row)"><i class="layui-icon layui-icon-ok"></i></div>
                            </td>
                            <td>{{row.Name}}</td>
                            <td style="text-align:center">{{row.Gender}}</td>
                            <td style="text-align:center">{{row.Year}}</td>
                            <td style="text-align:center">{{row.Semester}}</td>
                            <td>{{row.FullName}}</td>
                            <td style="text-align:center">{{row.TotalAmount}}</td>
                            <td style="text-align:center">{{FormatPayState(row.PayState)}} <i v-on:click="OnChangePayState(row)" class="fa fa-pencil-square-o" style="color:#1E9FFF"></i></td>
                            <td style="text-align:center">{{row.AddTime}}</td>                        
                            <td>
                                <a class="layui-btn layui-btn-xs layui-btn-normal" title="编辑" v-on:click="OnView(row)"><span class="fa fa-eye fa-fw "></span></a>
                                <a class="layui-btn layui-btn-xs layui-btn-warm" title="删除" v-on:click="OnDelete(row)"><span class="fa fa-trash-o fa-fw"></span></a>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <div class="LgTable-NoData" v-if="paymentSlips.length==0||loading">
                    <p v-if="!loading">没有数据 ~</p>
                    <p v-if="loading"><img src="/Plugins/layer/theme/default/loading-2.gif" style="width:20px" /> 数据加载中...</p>
                </div>
            </div>
            <!--分页-->
            <div id="pager-paymentSlip" style="margin-top:-10px;"></div>
        </div>
    </div>
    <!--弹层-->
     <!--缴费单生成-->
    <div id="PaymentSlipViewWrap" style="display:none;padding:20px;">
        <div class="layui-form">
            <fieldset class="layui-elem-field layui-field-title">
                <legend>学生信息</legend>
            </fieldset>
            <div skin="lg-form-inline">
                <div class="lg-search-item" style="width:100px">
                    <lg-form-singletext :data="{Title:'姓名'}" :render-type='1' :value="paymentSlip.Name" ></lg-form-singletext>
                </div>
                 <div class="lg-search-item" style="width:80px">
                    <lg-form-singletext :data="{Title:'性别'}" :render-type='1' :value="paymentSlip.Gender" ></lg-form-singletext>
                </div>
                <div class="lg-search-item" style="width:160px">
                    <lg-form-phone :data="{Title:'手机'}" :render-type='1' v-model:value="paymentSlip.Phone"></lg-form-phone>
                </div>
                <div class="lg-search-item" style="width:100px">
                    <lg-form-singletext :data="{Title:'学年',Name:'Year'}" :render-type='1' :value="paymentSlip.Year"></lg-form-singletext>
                </div>
                <div class="lg-search-item" style="width:70px">
                    <lg-form-singletext :data="{Title:'学期'}" :render-type='1' :value="paymentSlip.Semester"></lg-form-singletext>
                </div>
                <div class="lg-search-item" style="width:270px">
                     <lg-form-singletext :data="{Title:'班级'}" :render-type='1' :value="paymentSlip.FullName" ></lg-form-singletext>
                </div>
            </div>
            <fieldset class="layui-elem-field layui-field-title">
                <legend>缴费项目</legend>
            </fieldset>
            <div class="layui-form-item">
                <table class="lg-table">
                    <thead>
                        <tr>
                            <th>项目</th>
                            <th>备注</th>
                            <th style="width:120px">金额</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(item,index) in paymentSlip.Items">
                            <td>
                                <input type="text" v-model="item.Title" />
                            </td>
                            <td>
                                <input type="text" v-model="item.Tips" />
                            </td>
                            <td>
                                <input type="number" v-model="item.Amount" />
                            </td>                           
                        </tr>
                    </tbody>
                    <tfoot>
                        <tr>
                            <td colspan="2" style="text-align:right;">合计金额</td>
                            <td colspan="2">{{totalAmount}}</td>
             padding </tr>
                    </tfoot>
                </table>
            </div>
            
        </div>
    </div>
     <!--学费状态切换-->
    <div id="PayStateWrap" style="display:none;padding:10px;">
        <div class="lg-form-flex" >
            <template v-for="item in options.PayState">
                <div :class="['lg-form-option-check',{'selected':item.Value==setPayStateFormData.PayState}]" v-on:click="setPayStateFormData.PayState=item.Value" v-if="item.Value>0">
                    {{item.Text}}<span class="fa fa-check"></span>
                </div>
            </template>
        </div>
        <div style="margin:5px;">
            <lg-form-textarea :data="{Title:'备注信息'}" v-model:value="setPayStateFormData.PayTips"></lg-form-textarea>
        </div>
        <div class="layui-form-item text-center">
                <button class="layui-btn" type="button" v-on:click="OnPayStateSubmit">确认添加</button>
            </div>
    </div>   
</div>
<script class="tempScript" type="module">
    import { freeForm } from '/plugins/lgform/lg.form.2.1.js'
    freeForm.addEventListener();
    frame.createPage({
        mounted: function() {
            var page = this;
            var app = Vue.createApp({
                data() {
                    return {
                        paymentSlips: [],
                        template: {},
                        options: {
                            Semester: [
                                {
                                    Text: "不限",
                                    Value: ""
                                },
                                {
                                    Text: "1",
                                    Value: 1
                                },
                                {
                                    Text: "2",
                                    Value: 2
                                }],
                            Grades: [],
                            PayState: [
                                {
                                    Text: "不限",
                                    Value: ""
                                },
                                {
                                    Text: "待缴费",
                                    Value: "1"
                                },
                                {
                                    Text: "预付定金",
                                    Value: "2"
                                },
                                {
                                    Text: "已缴费",
                                    Value: "3"
                                },
                                {
                                    Text: "申请退费",
                                    Value: "4"
                                },
                                {
                                    Text: "已退费",
                                    Value: "5"
                                },
                                {
                                    Text: "放弃缴费",
                                    Value: "6"
                                }
                            ]
                        },
                        where: {
                            Page: 1,
                            Limit: 10 
                        },
                        checked: [],
                        loading: false,
                        paymentSlip: {},
                        setPayStateFormData:{}  
                    }
                },
                mounted:function() {
                    this.GetPaymentSlipList();
                    this.GetGradesAndSetOption();
                    this.PaymentSlipInit();
                    this.PayStateFormDataInit();
                },
                computed: {
                    totalAmount: function() {
                        var total = 0;
                        for (let i in this.paymentSlip.Items) {
                            total += this.paymentSlip.Items[i].Amount;
                        }
                        return total
                    }
                },
                methods: {
                    GetGradesAndSetOption: function() {
                        lg.request({
                            url: "/api/sys/apply/GetGradeList",
                            data: { page: 1, limit: 999 },
                            success: res => {
                                if (res.code == 0) {
                                    if (res.data != null && res.data.length > 0) {
                                        var grades = this.Sort(res.data, 0, []);
                                        var options = [{ Text: '不限', Value: '' }];
                                        for (let i in grades) {
                                            options.push({
                                                Text: grades[i].FullName,
                                                Value: grades[i].Id
                                            })
                                        }
                                        this.options.Grades = options;
                                    } else {
                                        this.options.Grades = [];
                                    }
                                } else {
                                    top.layer.msg(res.msg, { icon: 2 });
                                }
                            }
                        })
                    },
                    GetPaymentSlipList: function() {
                        this.loading = true;
                        this.paymentSlips = [];
                        lg.request({
                            url: "/api/sys/apply/GetPaymentSlipList",
                            data: this.where,
                            success: res => {
                                if (res.code == 0) {
                                    if (res.count > 0) {
                                        this.paymentSlips = res.data;
                                        this.setPage(res.count)
                                    }

                                } else {
                                    layer.msg(res.msg, { icon: 2 });
                                }
                            },
                            complete: res => {
                                this.loading = false;
                            }
                        })
                    },
                    PaymentSlipInit: function() {
                        this.paymentSlip = {
                            Name: "",
                            Gender: "",
                            Year: "",
                            Semester: "",
                            FullName: "",
                            Phone: "",
                            ApplySN: "",
                            Items: []
                        }                       
                    },
                    PayStateFormDataInit: function(data) {
                        if(data){
                            this.setPayStateFormData.Id = data.Id;
                            this.setPayStateFormData.PayState = data.PayState;
                            this.setPayStateFormData.PayTips = data.PayTips;
                        }else{
                            this.setPayStateFormData = {
                                 Id:0,
                                 PayState:"",
                                 PayTips:""
                            }
                        }
                    },
                    TemplateInit: function(obj) {
                        if (obj) {
                            this.template = {
                                Id: obj.Id,
                                Title: obj.Title || "",
                                Tips: obj.Tips || "",
                                Items: obj.Items || []
                            }
                        } else {
                            this.template = {
                                Id: 0,
                                Title: "",
                                Tips: "",
                                Items: []
                            }
                        }
                    },
                    onSearch: function() {
                        this.where.Page = "1";
                        this.GetPaymentSlipList();
                    },
                    refresh: function() {
                        this.GetPaymentSlipList();
                    },
                    setPage: function(count) {
                        var that = this;
                        layui.laypage.render({
                            elem: 'pager-paymentSlip'
                            , curr: that.where.Page
                            , limit: that.where.Limit
                            , count: count
                            , layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']
                            , jump: function(obj, first) {
                                if (!first) {
                                    that.where.Page = obj.curr;
                                    that.where.Limit = obj.limit;
                                    that.GetPaymentSlipList();
                                }
                            }
                        });
                    },
                    Sort: function(data, fid, arr) {
                        var that = this
                        var grades = data.filter(d => d.FatherId == fid)
                        if (grades.length > 0) {
                            for (let i in grades) {
                                var obj = grades[i];
                                arr.push(obj);
                                that.Sort(data, obj.Id, arr)
                            }
                        }
                        return arr;
                    },
                    OnAETemplate: function(item) {
                        if (item) {
                            var obj=lg.obj.copy(item);
                            obj.Items=lg.convert.toJson(obj.Items,[])
                            this.TemplateInit(obj);
                        }
                        layer.open({
                            type:1,
                            area:['900px','800px'],
                            content:$("#TemplateAEWrap"),
                            cancel: this.TemplateInit
                        })
                    },
                    OnTemplateDelete: function(item) {
                        var that = this;
                        layer.confirm("删除不可恢复，是否确定继续执行？", function(box) {
                            layer.close(box);
                            lg.request({
                                url: "/api/sys/apply/deleteTuitionTemplate",
                                method: "post",
                                data: { id: item.Id },
                                success: res => {
                                    if (res.code == 0) {
                                        that.refresh();
                                    } else {
                                        layer.msg(res.msg, { icon: 2 })
                                    }
                                }
                            })
                        })

                    },
                    isChecked: function(item) {
                        return this.checked.filter(p => p.Id == item.Id).length == 1;
                    },
                    onRowCheck: function(item) {
                        if (this.isChecked(item)) {
                            this.checked = this.checked.filter(p => p.Id != item.Id);
                        } else {
                            this.checked.push(item);
                        }
                    },
                    onRowCheckAll: function() {
                        var b = this.checked.length == this.paymentSlips.length;
                        if (b) {
                            this.checked = []
                        } else {
                            var arry = [];
                            for (let i in this.paymentSlips) {
                                arry.push(this.paymentSlips[i]);
                            }
                            this.checked = arry;
                        }

                    },
                    onCheckAll: function(attr) {
                        var b = false;
                        var checkCount = this.colmaps.filter(p => p[attr]).length;
                        var count = this.colmaps.length;
                        if (checkCount == count) {
                            b = true;
                        }
                        for (let i in this.colmaps) {
                            this.colmaps[i][attr] = !b;
                        }
                    },
                    OnView: function(item) {
                       this.paymentSlip =lg.obj.copy(item);
                       this.paymentSlip.Items = lg.convert.toJson(this.paymentSlip.Items, []);
                        layer.open({
                            type: 1,
                            area: ['900px', '800px'],
                            content: $("#PaymentSlipViewWrap")
                        })
                    },
                    OnDelete: function(item) {
                        var that = this;
                        layer.confirm("删除不可恢复，是否确认执行？", function(box) {
                            layer.close(box);
                            lg.request({
                                url:"/api/sys/apply/DeletePaymentSlip",
                                method:"post",
                                data: {id:item.Id},
                                success: res => {
                                    if (res.code == 0) {
                                        layer.msg("执行成功！", { icon: 1 });
                                        that.refresh();
                                    } else {
                                        layer.msg(res.msg, {icon:2})
                                    }
                                }
                            })
                        })
                    },
                    FormatPayState: function(state) {
                        switch (state) {
                            case 1:
                                return '待缴费';
                            case 2:
                                return '预缴费';
                            case 3:
                                return '已缴费';
                            case 4:
                                return '申请退费';
                            case 5:
                                return '已退费';
                            case 6:
                                return '放弃缴费';
                        }
                    },
                    OnChangePayState:function(row){
                        this.PayStateFormDataInit(row);
                        layer.open({
                            type:1,
                            area:["620px","400px"],
                            content:$("#PayStateWrap")
                        })
                    },
                    OnPayStateSubmit: function() {
                        lg.request({
                            url:"/api/sys/apply/ChangePayStateOfPaymentSlip",
                            method:"post",
                            data:this.setPayStateFormData,
                            success: res => {
                                if (res.code == 0) {
                                    layer.closeAll();
                                    layer.msg("执行成功!", { icon: 1 });
                                    this.refresh();
                                    this.PayStateFormDataInit();
                                }else{
                                    layer.msg(res.msg, {icon:2})
                                }
                            }
                        })
                    }
                }
            })
            freeForm.regComponent(app);
            this.vm = app.mount("#lg-paymentSlip-list");
        },
        methods: {
            reload: function() {
                this.vm.refresh();
            },
        }
    }).mount();
</script>